<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="utf-8" />
		<title>锋迷五子棋游戏-注册页面</title>
		<!-- 样式标签 -->
		<style>
			.body_class{
				height: 100%;
				background-image: url(img/background.jpeg);
				background-size: 100% 100%;
				display: flex;/*设置当前的标签为 弹性盒子模型**/
				flex-direction: row;/*水平排列**/
				align-items: center;/*纵向居中**/
				justify-content: center; /*横向居中**/
			}
			
			.main_div{
				width: 400px;
				height: 420px;
				background-color: bisque;
				border-radius: 10px;
				box-shadow: 10px 10px 10px #888888;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			.title_span {
				margin-top: 30px;
				font-size: 25px;
				font-family: "楷体";
				text-shadow: 5px 5px 5px black;
			}
			
			.item_div {
				margin-top: 15px;
			}
			
			.div_bottom {
				margin-top: 40px;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
			}
			
			button {
				width: 50%;
				height: 100%;
			}
			
			.header{
				width: 80px;
				height: 80px;
				margin-top: 20px;
				border-radius: 50%;
			}
		</style>
		<!-- js -->
		<script src="js/jquery.js"></script>
		<script>
			//去到登录页面
			function goLoginPage(){
				//跳转到登录页面
				location.href="index.html"
			}
			
			//通过ajax的方式进行注册
			function registerAjax(){
				
				//获取用户的用户名、密码、昵称、邮箱
				// var username = document.getElementById("username").value;
				// var password = document.getElementById("password").value;
				// var nickname = document.getElementById("nickname").value;
				// var email = document.getElementById("email").value;
				
				var username1 = $("#username").val();
				var password1 = $("#password").val();
				var nickname1 = $("#nickname").val();
				var email1 = $("#email").val();
				var sex1 = $("[name='sex']:checked").val();
				
				//客户端的参数校验 
				if(username1 == null || username1.trim() == ""){
					alert("账号不能为空！");
					return;
				}
				
				if(password1 == null || password1.trim() == ""){
					alert("密码不能为空！");
					return;
				}
				
				if(nickname1 == null || nickname1.trim() == ""){
					alert("昵称不能为空！");
					return;
				}
				
				if(email1 == null || email1.trim() == ""){
					alert("email不能为空！");
					return;
				}
				
				//发送ajax
				$.ajax({
					type: "POST",
					url: "http://localhost:8080/user/register",
					data: {
						username: username1,
						password: password1,
						nickname: nickname1,
						email: email1,
						sex: sex1
					},
					success: function(data){
						//服务器给我返回的结果
						if(data == 1){
							alert("恭喜你注册成功！");
							//自动跳转到登录页面
							location.href="index.html";
						} else if(data == -1){
							alert("索瑞，用户名已经存在！");
						} else if(data == -2){
							alert("索瑞，邮箱已经被注册！");
						}
					}
				});
			}
		</script>
	</head>
	<!-- 网页体 -->
	<body class="body_class">
		
		<!-- <form action="http://localhost:8080/user/register" method="post"> -->
		<!-- 登录注册的背景框 -->
		<div class="main_div">
			
			<span class="title_span">账号注册</span>
			
			<img class="header" src="img/header.jpeg"/>
			
			<div class="item_div">
				账号：<input id="username" placeholder="请输入用户名"/>
			</div>
			
			<div class="item_div">
				密码：<input id="password" type="password" placeholder="请输入密码"/>
			</div>
			
			<div class="item_div">
				昵称：<input id="nickname" placeholder="请输入昵称"/>
			</div>
			
			<div class="item_div">
				邮箱：<input id="email" placeholder="请输入邮箱"/>
			</div>
			
			<div class="item_div">
				性别：
				<input name="sex" type="radio" value="0" checked/> 男 
				<input name="sex" type="radio" value="1"/> 女 
			</div>
			
			<div class="div_bottom">
				<button onclick="registerAjax()">注册</button>
				<button onclick="goLoginPage()">去登录</button>
			</div>
			
		</div>
		<!-- </form> -->
	</body>
</html>
